<template>
  <div element-loading-background="#fff" element-loading-text="玩命加载中...">
    <el-table ref="multipleTableRef" :data="tableData" background>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="afterNumber" label="售后订单编号" width="120" />
      <el-table-column prop="refundType" label="退款类型" />
      <el-table-column prop="idName" label="买家ID/名称" />
      <el-table-column
        prop="details"
        label="订单详情"
        width="240"
        align="center"
      />
      <el-table-column prop="dates" label="申请时间" />
      <el-table-column prop="actualPay" label="实付款" width="60" />
      <el-table-column prop="state" label="订单状态" />
      <el-table-column prop="relation" label="联系方式" />
      <el-table-column label="操作" width="280" align="center">
        <template #default="scope">
          <el-button color="#000" @click="getId(scope.row.id)">
            详情/编辑
          </el-button>
          <div class="passRefuse" v-show="scope.row.state === '待处理'">
            <el-button color="rgb(33,61,192)" @click="confirmPass(scope.$index)"
              >通过</el-button
            >
            <el-button color="rgb(245,108,108)" @click="refuse(scope.$index)"
              >拒绝</el-button
            >
          </div>
          <el-button
            color="rgb(33,61,192)"
            v-show="scope.row.state === '处理中'"
            style="width: 140px"
            @click="outChange(scope.$index)"
            >退货/换货</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { notiFication } from "@/utils/message.js";
import { getById } from "../../api/SaleFinance.js";
import { useOrderData } from "../../stores/allOrder";
import { ref } from "vue";
import { useRouter } from "vue-router";

const allOrder = useOrderData();
const props = defineProps({
  tableData: {
    type: Array,
    default: [],
  },
});

const router = useRouter();
const detailArr = ref([]);

function getId(index) {
  const ids = ref(Number(index));
  console.log(ids.value);
  getById(ids.value)
    .then((res) => {
      // console.log(res.data.item);
      detailArr.value = res.data.item;
      console.log(detailArr.value);
      allOrder.list = detailArr.value;
      router.push("/sale/details");
    })
    .catch((error) => {
      console.log(error);
    });
}

/**
 * confirmPass
 * 点击通过，判断通过成功与否
 * @param { number } index
 */
function confirmPass(index) {
  notiFication("通过成功", "success");
  props.tableData[index].state = "处理中";
}

/**
 * refuse
 * 点击拒绝,判断拒绝成功与否
 * @param { number } index
 */
function refuse(index) {
  notiFication("拒绝成功", "success");
  props.tableData[index].state = "已处理";
}

/**
 * outChange
 * 点击退货/换货,判断退货/换货成功与否
 * @param { number } index
 */
function outChange(index) {
  notiFication("退货/换货成功", "success");
  props.tableData[index].state = "已处理";
}
</script>

<style lang="less" scoped>
.el-table {
  width: 100%;
  font-size: 12px;
  .el-button {
    width: 66px;
    font-size: 12px;
    margin-left: 10px;
  }
}
:deep(.el-table td.el-table__cell div) {
  display: flex;
}
</style>
